<template>
    <a-layout class="layout-wrapper">
        <!-- 头部 -->
        <a-layout-header class="header-layout-wrapper">
            <div style="width: 1200px;margin: 0 auto;">
                <!-- Logo -->
                <div class="logo-wrapper">
                    <h1>
                        <a href="/">
                            <span class="logo"></span>
                            <span>吃惊开放平台</span>
                        </a>
                    </h1>
                </div>
                <!-- 菜单 -->
                <a-menu mode="horizontal" class="menu-wrapper">
                    <a-menu-item v-for="menu in menuList" :key="menu.path">
                        <router-link :to="{ path : menu.path }">{{ menu.title }}</router-link>
                    </a-menu-item>
                </a-menu>
            </div>
        </a-layout-header>
        <!-- 内容 -->
        <a-layout-content class="content-layout-wrapper">
            <slot />
            <router-view/>
        </a-layout-content>
        <!-- 底部 -->
        <a-layout-footer class="footer-layout-wrapper">
            <div class="links">
                <a href="#">帮助</a>
                <a href="#">隐私</a>
                <a href="#">条款</a>
            </div>
            <div class="copyright">Copyright ©2020 Created by WFT. All Rights Reserved.</div>
            <a target="_blank" rel="nofollow" href="http://www.beian.miit.gov.cn">闽ICP备20001762号</a>
        </a-layout-footer>
    </a-layout>
</template>

<script>
    export default {
        props : {
            menuList : {
                type : Array,
                default : () => [{ title : '控制台', path : '/home/dashboard' }]
            }
        }
    };
</script>

<style scoped>
    .layout-wrapper,
    .content-layout-wrapper,
    .footer-layout-wrapper{
        background-color: #FFFFFF;
    }
    /* 头部 */
    .header-layout-wrapper{
        width: 100%;
        padding: 0;
        overflow: hidden;
        background-color: #FFFFFF;
        -webkit-box-shadow: 0 1px 10px #999;
        z-index: 1;
    }
    /* Logo */
    .logo-wrapper {
        float: left;
        padding-right: 65px;
        height: 58px;
        line-height: 58px;
        font-size: 18px;
    }
    .logo-wrapper h1{
        margin: 0 10px 0 24px;
    }
    .logo-wrapper a{
        color: #000000;
    }
    .logo-wrapper .logo {
        display: inline-block;
        width: 38px;
        height: 39px;
        margin: 13px 10px 0 0;
        background: url(https://cjlgb-design-oauth.cdn.bcebos.com/favicon.png) no-repeat;
        background-size: 95% 95%;
        vertical-align: top;
    }
    /* 菜单 */
    .menu-wrapper{
        float: right;
        height: 64px;
        line-height: 64px;
    }
    /* 底部 */
    .footer-layout-wrapper{
        width: 100%;
        bottom: 0;
        padding: 0;
        margin: 45px 0 25px;
        text-align: center;
        font-size: 14px;
    }
    .footer-layout-wrapper .links{
        margin-bottom: 8px;
    }
    .footer-layout-wrapper .links a:not(:last-child){
        margin-right: 40px;
    }
    .footer-layout-wrapper .links a,
    .footer-layout-wrapper .copyright{
        color: rgba(0,0,0,.45);
        margin-bottom: 5px;
    }
</style>
